<template>
  <div class="product-line">
    <e-container class="container">
      <a-spin :spinning="loading" tip="Loading...">
        <div class="top">
          <e-title-add title="Product Line" addTitle="Add">
            <span v-permission="'ProductLine:Add'" class="add-t" @click="handleAdd">
              <e-icon type="add" color="#3c6cfe" font-size="16px" />
              <span class="text">Add</span>
            </span>
          </e-title-add>
        </div>
        <div v-permission="'ProductLine:Query'" class="table">
          <a-table
            :columns="columns"
            :data-source="data"
            class="ant-table-striped"
            :pagination="false"
            :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'operate'">
                <span
                  v-permission="'ProductLine:Edit'"
                  style="cursor: pointer; margin-right: 36px"
                  @click="handleEdit(record)">
                  <e-icon type="edit" color="#3c6cfe" font-size="12px" /><span
                    style="color: #3c6cfe; margin-left: 2px; font-size: 14px"
                    >Edit</span
                  >
                </span>
                <a-popconfirm
                  title="Are you sure delete this task?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="handleDelete(record)">
                  <span
                    v-if="!briefInfo.isExisting || (briefInfo.isExisting && data.length > 1)"
                    v-permission="'ProductLine:Delete'"
                    style="cursor: pointer">
                    <e-icon type="delete" color="#fc4b3b" font-size="12px" /><span
                      style="color: #fc4b3b; margin-left: 2px; font-size: 14px"
                      >Delete</span
                    >
                  </span>
                </a-popconfirm>
              </template>
            </template>
            <template #emptyText>
              <e-empty>
                <template #description>
                  <div>No Data</div>
                </template>
              </e-empty>
            </template>
          </a-table>
        </div>

        <a-modal
          v-model:visible="visible"
          wrap-class-name="primary-modal"
          width="888px"
          :title="isAdd ? 'Add Product Line' : 'Edit Product Line'"
          @cancel="handleCancel">
          <a-form ref="formRef" layout="vertical" :model="formState" :rules="rules">
            <a-form-item ref="productLineName" label="Product Line Name" name="productLineName">
              <a-input v-model:value="formState.productLineName" autocomplete="off"></a-input>
            </a-form-item>
            <a-form-item ref="note" label="Note" name="note">
              <a-textarea v-model:value="formState.note" style="height: 80px" autocomplete="off"></a-textarea>
            </a-form-item>
          </a-form>
          <template #footer>
            <a-button key="back" @click="handleCancel">Cancel</a-button>
            <a-button
              key="submit"
              v-permission="isAdd ? 'ProductLine:Add' : 'ProductLine:Edit'"
              type="primary"
              @click="handleSave"
              >Save</a-button
            >
          </template>
        </a-modal>
      </a-spin>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, computed, inject, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import EContainer from '@/components/EContainer.vue'
import ETitleAdd from '@/components/ETitleAdd.vue'
import pageColumns from '@/assets/script/page_columns.js'
import productLine from '@/api/client/productLine.js'
import { SAVED_SUCCESSFULLY, DELETE_SUCCEEDED } from '@/constants/message.js'
const { message } = inject('Feedback')

const route = useRoute()
const store = useStore()
const columns = reactive(pageColumns.productLine)
// 数据
const data = ref([])
// 模态框显示隐藏
const visible = ref(false)
// 是否新增
const isAdd = ref(true)
// 获取form
const formRef = ref()
// 新增内容
const formState = reactive({
  productLineName: '',
  note: '',
  id: ''
})
const briefInfo = computed(() => store.state.client.briefInfo)
const loading = ref(false)
const rules = {
  productLineName: [
    {
      required: true,
      message: 'Please input Product Line Name.',
      trigger: 'blur'
    }
  ]
  // note: [
  //   {
  //     required: true,
  //     message: 'Please input Note.',
  //     trigger: 'blur'
  //   }
  // ]
}
/**
 * 新增
 */
const handleAdd = () => {
  isAdd.value = true
  visible.value = true
}
/**
 * 编辑
 * @param record
 */
const handleEdit = record => {
  isAdd.value = false
  visible.value = true
  formState.productLineName = record.productLineName
  formState.note = record.description
  formState.id = record.id
}
/**
 * 提交数据
 */
const handleSave = () => {
  formRef.value
    .validate()
    .then(() => {
      if (isAdd.value) {
        productLine
          .createProductLine({
            clientID: route.params.id,
            productLineName: formState.productLineName.trim(),
            note: formState.note.trim()
          })
          .then(res => {
            if (res.code === 2000) {
              message.success(SAVED_SUCCESSFULLY)
              getData()
            }
          })
      } else {
        productLine
          .editProductLine({
            id: formState.id,
            productLineName: formState.productLineName.trim(),
            note: formState.note.trim()
          })
          .then(res => {
            if (res.code === 2000) {
              message.success(SAVED_SUCCESSFULLY)
              getData()
            }
          })
      }
      handleCancel()
    })
    .catch(() => {})
}
/**
 * 取消模态框
 */
const handleCancel = () => {
  visible.value = false
  formState.productLineName = ''
  formState.note = ''
}
/**
 * 删除
 * @param record
 */
const handleDelete = record => {
  productLine
    .deleteProductLine({
      ID: record.id
    })
    .then(res => {
      if (res.code === 2000) {
        getData()
        handleCancel()
        message.success(DELETE_SUCCEEDED)
      }
    })
}
/**
 * 获取列表数据
 */
const getData = () => {
  loading.value = true
  productLine
    .getProductLineList({
      clientID: route.params.id
    })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 数据初始化
 */
onMounted(() => {
  getData()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
.product-line {
  width: 100%;
  //height: 100%;
  //min-height: 100%;
  .container {
    width: 100%;
    height: 100%;
    padding: 24px;
    .top {
      padding-bottom: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .add-t {
        cursor: pointer;
        margin-top: 3px;
        color: @primary-color;
        .text {
          margin-left: 8px;
        }
      }
    }
    .table {
      margin-top: 30px;
    }
  }
}
</style>
<route lang="yaml">
name: Product Line
path: '/client/:id/product-line'
meta:
  sort: 30
  icon: ProductLine
  permission: ProductLine
</route>
